<template>
  <a-layout-content class="content">
    <a-row class="contentHeader">
      <a-col :span="4">
        <h1>{{route.query.topName}}</h1>
      </a-col>
      <a-col :span="16"></a-col>
      <a-col :span="4">
        <a-button type="primary" @click="publish">发布帖子</a-button>
      </a-col>
    </a-row>

    <div :style="{ background: '#fff', minHeight: '280px' }">
      <!--  -->
      <a-list item-layout="horizontal" :data-source="BoardDetails">
        <template #renderItem="{ item }">
          <a-list-item class="list">
            <a-list-item-meta class="listmeta">
              <template #description>
                <div class="listinfo">
                  <p class="icon"><UserOutlined /> {{ item.user.nickname }}</p>

                  <p class="icon "><FieldTimeOutlined />{{ item.updateTime }}</p>
                </div>
              </template>

              <template #title>
                <a href="https://www.antdv.com/">{{ item.title }}</a>
              </template>

              <template #avatar>
                <a-avatar src="https://joeschmoe.io/api/v1/random" />
              </template>

         
            </a-list-item-meta>
            <template #actions>
                <div class="listnav">
                  <p class="icon"><EyeOutlined /> 阅读{{ item.visitCount }}</p>
                  <p class="icon"><LikeOutlined /> 点赞{{ item.likeCount }}</p>
                  <p class="icon"><CommentOutlined  /> 评论{{ item.replyCount }}</p>
                </div>
              </template>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </a-layout-content>
</template>

<script setup>
import api from "@/api";
import { CommentOutlined, EyeOutlined, FieldTimeOutlined, LikeOutlined, UserOutlined } from "@ant-design/icons-vue";
import { computed, onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route.query);
const BoardDetails = ref([]);

const id = computed(() => Number(route.query.topId));

onMounted(() => {
  fetchByBoardDetails();
});

const fetchByBoardDetails = async () => {
  const data = await api.getAllByBoardDetails(id.value);
  BoardDetails.value = data; // 直接赋值给ref的value
  console.log("文章list", BoardDetails);
};

watch(id, (newValue, oldValue) => {
  console.log("id变化了", newValue);
  fetchByBoardDetails();
});

const setPublishcontent = () => {
  console.log("发布内容", BoardDetails.value);
};
</script>

<style>
.content {
  width: 90%;
  margin: 0 auto;
}

.contentHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 40px;
}

.list {
  width: 85vw;
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 10px auto;
}
.listmeta{
  margin-top: 5px;
  padding: 5px;
}
.listinfo {
  display: flex;
  justify-content: start;
  align-items: center;

}

.icon {
  padding-right: 5px;
}
.listnav{
  display: flex;

  justify-content: space-between;
  margin-top: 20px;
  
}
</style>
